<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { FormInstance, FormRules, ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import axios from 'axios'


const router = useRouter()
const ruleFormRef = ref<FormInstance>()

const checkPhone = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error('请输入手机号'))
  }
  setTimeout(() => {
    const r = /^[1-9][0-9]*$/; // 正整数
    if (!r.test(value)) {
      callback(new Error('请输入合法的手机号'))
    } else {
        callback()
    }
  }, 1000)
}

const checkNickname = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error('请输入你的昵称'))
  }
  else{
    callback()
  }
}


const validatePass = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入密码'))
  } else {
    if (ruleForm.checkPass !== '') {
      if (!ruleFormRef.value) return
      ruleFormRef.value.validateField('checkPass')
    }
    callback()
  }
}
const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请再次输入密码'))
  } else if (value !== ruleForm.pass) {
    callback(new Error("两次密码不一致"))
  } else {
    callback()
  }
}

const ruleForm = reactive({
  pass: '',
  checkPass: '',
  phone: '',
  nickname: ''
})

const rules = reactive<FormRules<typeof ruleForm>>({
  pass: [{ validator: validatePass, trigger: 'blur' },
  { min: 6, max: 15, message: '密码长度在 6 到 15 个字符', trigger: 'blur' },
  ],
  checkPass: [{ validator: validatePass2, trigger: 'blur' }],
  phone: [{ validator: checkPhone, trigger: 'blur' },
  { min: 11, max: 11, message: '手机号长度为11个字符', trigger: 'blur' },
  ],
  nickname: [{ validator: checkNickname, trigger: 'blur' },
    { min: 1, max: 10, message: '昵称长度在 1 到 10 个字符', trigger: 'blur' }
  ]
})

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      enroll()
      router.push('/loginInterface')
    } else {
      console.log('error submit!')
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

function enroll(){
  axios({
    method: 'post', 
    url : 'https://47.120.69.214:8787/user/enroll',
    data : {
      "phone" : ruleForm.phone,
      "password" : ruleForm.pass,
      "name" : ruleForm.nickname
    },
    headers : {
      "Content-Type" : "application/json"
    }
  }).then((response) => {
    ElMessage.success('注册成功')
})
.catch(error => {
  if(error.response.status === 614) return ElMessage.error('手机号已注册')
})
}
</script>

<template>
  <div id="overall">
    <el-card style="width: 30vw; margin:10% 38%;">
      <template #header>
        <div class="card-header" style="text-align: center; font-size:30px;">
          <span >注册</span>
        </div>
    </template>

      <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="ruleForm"
    status-icon
    :rules="rules"
    label-width="auto"
    class="demo-ruleForm"
  >
  <el-form-item label="手机号" prop="phone">
      <el-input v-model="ruleForm.phone" placeholder="请输入手机号"/>
    </el-form-item>
    <el-form-item label="密码" prop="pass">
      <el-input v-model="ruleForm.pass" type="password" autocomplete="off" placeholder="请输入密码" show-password/>
    </el-form-item>
    <el-form-item label="密码" prop="checkPass">
      <el-input v-model="ruleForm.checkPass" type="password" autocomplete="off" placeholder="请再次输入密码" show-password/>
    </el-form-item>
    <el-form-item label="昵称" prop="nickname">
      <el-input v-model="ruleForm.nickname" placeholder="请输入你的昵称"/>
    </el-form-item>
  </el-form>

      <template #footer>
        <el-form-item style="color:black">
          <el-button type="success" style="margin-top:3%" @click="router.push('/loginInterface')" link>返回登录</el-button>
      <el-button type="primary" @click="submitForm(ruleFormRef)" 
      style="width:80px; height:45px; font-size:22px;margin-left:18%;color:white">
        注册
      </el-button>
      <el-button @click="resetForm(ruleFormRef)" style="margin-left:15%; margin-top:5%">重置</el-button>
    </el-form-item>
    </template>
    </el-card>

  </div>
  </template>

<style scoped>
#overall{
    display: flex; 
    justify-content: 
    center; align-items: 
    center; height: 100vh;
    /* background-color:rgb(136, 237, 125); */
    /* background-image: linear-gradient(to bottom  , rgb(225, 236, 226), rgb(225, 236, 226)
   , rgb(136, 237, 125) ,rgb(105, 225, 105)); */
   background-image: linear-gradient(to bottom  ,rgb(105, 225, 105),rgb(136, 237, 125) 
    , rgb(225, 236, 226), rgb(225, 236, 226));
}

</style>